import React, { useState, useEffect } from "react";
import './modal.css'
/**
 * @param {visible boolean} props  控制显示
 * @returns 
 */
const Modal = (props) => {
    const [visible, setVisible] = useState(false)
    const { visible: show, children, title } = props;
    const { onClose,onConfirm, } = props;
    useEffect(() => {
        console.log('-----------')
        setVisible(show)
    }, [show])
    const closeModal = () => {
        console.log('想要关闭吗？')
        setVisible(false)
        onClose && onClose()
    }
    const confirm = () =>{
        console.log('想要确定吗？')
        setVisible(false)
        onConfirm && onConfirm()
    }
    const maskClick = () =>{
        setVisible(false)
        onClose && onClose()
    }
    return (
        visible && <div className="modal-wrapper">
            <div className="create-wrapper">
                <div className="modal">
                    <div className="modal-title">{title}</div>
                    <div className="modal-content">{children}</div>
                    <div className="modal-operator">
                        <button
                            onClick={closeModal}
                            className="modal-operator-close"
                        >取消</button>
                        <button
                            onClick={confirm}
                            className="modal-operator-confirm"
                        >确定</button>
                    </div>
                </div>
                <div className="mask" onClick={maskClick}></div>
            </div>
        </div>
    )
}


export default Modal